<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAG 向量数据库文件上传</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }

            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }

            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .upload-hover {
                @apply border-primary bg-primary/5;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-50">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fa fa-database text-primary text-2xl"></i>
            <h1 class="text-xl font-bold text-dark">RAG 向量数据库</h1>
        </div>
        <nav>
            <ul class="flex space-x-6">
                <li><a href="#" class="text-dark/70 hover:text-primary transition-custom">首页</a></li>
                <li><a href="#" class="text-dark/70 hover:text-primary transition-custom">文档</a></li>
                <li><a href="#" class="text-primary font-medium">上传文件</a></li>
                <li><a href="#" class="text-dark/70 hover:text-primary transition-custom">查询</a></li>
            </ul>
        </nav>
    </div>
</header>

<!-- 主内容区 -->
<main class="flex-grow container mx-auto px-4 py-8">
    <section class="max-w-3xl mx-auto bg-white rounded-xl shadow-lg p-6 md:p-8">
        <div class="text-center mb-8">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-2">上传文件到向量库</h2>
            <p class="text-dark/60 max-w-xl mx-auto">
                选择文档文件（PDF、Word、文本等），系统将自动提取内容并添加到向量数据库中
            </p>
        </div>

        <!-- 上传区域 -->
        <div id="upload-area"
             class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:upload-hover transition-custom mb-8">
            <i class="fa fa-cloud-upload text-primary text-5xl mb-4"></i>
            <h3 class="text-lg font-medium text-dark mb-2">拖放文件到此处或点击上传</h3>
            <p class="text-dark/60 text-sm mb-4">支持 PDF, DOCX, TXT 等格式文件</p>
            <button id="select-file-btn"
                    class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg transition-custom shadow-md hover:shadow-lg">
                <i class="fa fa-file-text-o mr-2"></i>选择文件
            </button>
            <input type="file" id="file-input" class="hidden" accept=".pdf,.docx,.doc,.txt,.md,.ppt,.pptx">
        </div>

        <!-- 上传文件列表 -->
        <div id="file-list" class="space-y-4 mb-8 hidden">
            <h3 class="text-lg font-medium text-dark mb-4">待上传文件</h3>
            <div id="file-items" class="space-y-3"></div>
        </div>

        <!-- 上传进度 -->
        <div id="upload-progress" class="hidden mb-8">
            <h3 class="text-lg font-medium text-dark mb-3">上传进度</h3>
            <div class="bg-gray-200 rounded-full h-2.5 mb-2">
                <div id="progress-bar" class="bg-primary h-2.5 rounded-full" style="width: 0%"></div>
            </div>
            <div class="flex justify-between text-sm text-dark/60">
                <span id="progress-text">准备上传...</span>
                <span id="progress-percentage">0%</span>
            </div>
        </div>

        <!-- 结果反馈 -->
        <div id="result-message" class="hidden p-4 rounded-lg mb-6 transition-custom"></div>

        <!-- 操作按钮 -->
        <div class="flex justify-center space-x-4">
            <button id="upload-btn"
                    class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg transition-custom shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed hidden">
                <i class="fa fa-upload mr-2"></i>开始上传
            </button>
            <button id="reset-btn"
                    class="bg-gray-200 hover:bg-gray-300 text-dark px-8 py-3 rounded-lg transition-custom hidden">
                <i class="fa fa-refresh mr-2"></i>重置
            </button>
        </div>
    </section>

    <!-- 功能说明 -->
    <section class="max-w-3xl mx-auto mt-12">
        <h3 class="text-xl font-bold text-dark mb-4">关于向量数据库</h3>
        <div class="grid md:grid-cols-2 gap-6">
            <div class="bg-white p-5 rounded-lg shadow-sm">
                <i class="fa fa-lightbulb-o text-primary text-xl mb-3"></i>
                <h4 class="font-medium text-dark mb-2">工作原理</h4>
                <p class="text-dark/70 text-sm">
                    系统将文档内容转换为向量表示，存储在向量数据库中。查询时，通过语义相似度检索相关内容片段，增强大型语言模型的回答准确性。
                </p>
            </div>
            <div class="bg-white p-5 rounded-lg shadow-sm">
                <i class="fa fa-file-text text-primary text-xl mb-3"></i>
                <h4 class="font-medium text-dark mb-2">支持格式</h4>
                <p class="text-dark/70 text-sm">
                    系统支持多种文档格式，包括 PDF、Word、PowerPoint、纯文本等。上传后，系统将自动提取文本内容并进行向量化处理。
                </p>
            </div>
        </div>
    </section>
</main>

<!-- 页脚 -->
<footer class="bg-dark text-white py-8">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <div class="flex items-center space-x-2">
                    <i class="fa fa-database text-primary text-xl"></i>
                    <span class="font-bold">RAG 向量数据库</span>
                </div>
                <p class="text-white/60 text-sm mt-2">增强大型语言模型的检索能力</p>
            </div>
            <div class="flex space-x-6">
                <a href="#" class="text-white/60 hover:text-primary transition-custom">
                    <i class="fa fa-github text-xl"></i>
                </a>
                <a href="#" class="text-white/60 hover:text-primary transition-custom">
                    <i class="fa fa-twitter text-xl"></i>
                </a>
                <a href="#" class="text-white/60 hover:text-primary transition-custom">
                    <i class="fa fa-linkedin text-xl"></i>
                </a>
            </div>
        </div>
        <div class="border-t border-white/10 mt-6 pt-6 text-center text-white/40 text-sm">
            &copy; 2025 RAG 向量数据库. 保留所有权利.
        </div>
    </div>
</footer>

<script src="../js/send.js"></script>
</body>
</html>